<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../utils/layui/css/layui.css">
		<style>
			@charset "UTF-8";
			
			body {
				margin: 10px 10px 10px 10px !important;
				background: #f2f2f2;
			}
			
			.page_container {
				border: 1px solid #f2f2f2;
				border-radius: 5px;
				background-color: #ffffff;
				padding: 20px;
			}
			
			.page_container .zhongxian {
				opacity: 0.15;
			}
			
			.page_container .atitle {
				margin-left: 20px;
				padding: 0 10px;
				font-size: 20px;
				font-weight: 300;
			}
			.layui-layer-dialog .layui-layer-setwin{
				display: none;
			}
			.finder-image{
				width: 100%;
			}
			.finder-image-preview{
			float: left;
			max-width: 400px;
			background: #eee;
			overflow: hidden;
			position: relative;
			color: #000;
			cursor:pointer;
			min-width: 200px;
			margin-right: 8px;
			}
			.finder-image-preview .image-preview{
			color: #000;
			line-height: 200px;
			text-align: center;
			}
			.finder-image-button{
			width:20px;
			min-height:200px;
			float: left;
			background: #fff;
			overflow: hidden;
			padding-left: 1px;
			}
			.clone-one-image:hover{
				color: #FF0000;
			}
			.preview-text{
				padding-top: 3px;
				width: 100%; 
				overflow: hidden;
				background: #fff;
			}
			.preview-text-input{
				width: 100%;
				background: #fff;
				height: 28px;
				border: none;
			}
			.preview-text-input:hover{
				background-color: #d2d2d2;
			}
		</style>
	</head>
	<body>
		
		<div class="page_container" id="container">
					
			<form class="layui-form" action="" method="post" onsubmit="return false;">
			  <input name="_method_" type="hidden" value="System.Common.FileText.audioUpload" />
			  <input name="toolbar" type="hidden" value="head" />
			  <input name="create_time" type="hidden" value="" />
			  <div class="layui-form-item">
				<label class="layui-form-label">文件地址</label>
				<div class="layui-input-block">
					<input data-label="文件地址" id="url" type="file" name="url" onchange="changeFile(this)" placeholder="请输入文件地址" autocomplete="off" class="layui-input inputFile" value="" required="" lay-verify="required"  accept="audio/*">
					
				</div>
			  </div>
			  <div class="layui-form-item">
					<label class="layui-form-label">时长(秒)</label>
					<div class="layui-input-block">
						<input data-label="时长(秒)" id="duration" class="layui-input" required="" lay-verify="required" type="number" name="duration"  autocomplete="off" value="" >
					</div>
			  </div>
			  <div class="layui-form-item">
				<div class="layui-input-block">
				  <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary" id="fmreset">重置</button>
				</div>
			  </div>
			</form>
			
		</div>
		<script src="/admin/utils/layui/layui.js" charset="utf-8"></script>
		<script src="/admin/utils/layui/config.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'helper'], function(){
			  var $ = layui.$;
			  var form = layui.form;
			  //监听提交
			  form.on('submit(formDemo)', function(data){
				  var fileData = data.field;
				  //验证一下
				  var fileExtension = fileData.url.substring(fileData.url.lastIndexOf('.') + 1);
				  if(!in_array(fileExtension, ["mp3", "wma", "ape", "flac", "dts", "m4a", "aac", "ac3", "mmf", "amr", "m4r", "ogg", "wav", "wv", "mp2"])){
					  return noticeMsg('error', "您选择的不是一个有效的音频文件");
				  }
			      var formdata = new FormData();
				  for(i in fileData){
					  formdata.append(i,fileData[i]);
				  }
				  var inputFile = document.getElementsByClassName('inputFile');
				  for(i in inputFile){
					  var mythis = inputFile[i];
					  if(inputFile[i]['files']){
						  if(mythis.files[0]['size'] > 1024*1024*50){
							  return noticeMsg('error', "上传文件不能超过50M");
						  }
						  formdata.append(mythis['name'],mythis.files[0]);
						  changeFile(mythis.files[0], formdata);
					  }
				  }
				  var index = layer.msg('<div id="upload-text">上传中..</div>', {
				      icon: 16
				      ,shade: 0.3
				      ,time: false
				  });
				  if($_GET['audio_id']){
					  $_GET['api'] += '?audio_id='+$_GET['audio_id'];
				  }
				  var startTime = microtime();
				  var request = $.ajax({
					url : $_GET['api'],
					method : 'POST',
					timeout : 300000, //上传文件最大3分钟
					data : formdata,
					dataType : 'json',
					mimeType: "multipart/form-data",
					processData: false,
					contentType: false,
					xhr: function() {
						var xhr = new XMLHttpRequest();
						//使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
						xhr.upload.addEventListener('progress', function(e) {
							//loaded代表上传了多少
							//total代表总数为多少
							var progressRate = ( (e.loaded / e.total * 100).toFixed(2)) + '%';
							var runTime = microtime() - startTime;
							var speed = e.loaded / runTime;
							var units = 'B/s';//单位名称
							if(speed/1024>1){
								speed = speed/1024;
								units = 'K/s';
							}
							if(speed/1024>1){
								speed = speed/1024;
								units = 'M/s';
							}
							speed = speed.toFixed(2);
							runTime = runTime.toFixed(2);
							var sendTotal = (e.total / 1024 / 1024).toFixed(2);
							//耗时
							$("#upload-text").html('已上传'+progressRate+",大小"+sendTotal+"M,速度"+speed+units+",已耗时"+runTime+'/s');
						})
								
						return xhr;
					}
				});
				  
				request.done(function(res) {
					console.error(res);
					layer.closeAll();
					var code = res.errorcode;
					if(code == 0){
						noticeMsg('success', "操作成功");
						parent.window.location.reload();
						//关闭当前窗口
					}else{
						noticeMsg('error', res.errormsg);
					}
				});
				  
				request.fail(function(jqXHR) {
					console.error(jqXHR);
					layer.closeAll();
					if(jqXHR.responseJSON && jqXHR.responseJSON.errormsg){
						if(jqXHR.responseJSON.errorcode == 10001){
							sessionStorage.clear();
							window.location = appRoute.login;
						}
						noticeMsg('error', jqXHR.responseJSON.errormsg);
					  }else{
						if (jqXHR.responseText) {
							alert(jqXHR.responseText);
						} else {
							alert(jqXHR.statusText);
						}
					  }
				});
			    return false;
			  });
			});
			
			function changeFile(ele) {
					try{
						var content = ele.files[0]
						var url = URL.createObjectURL(content);//获取录音时长
						var audioElement = new Audio(url);//audio也可获取视频的时长
						var duration;
						audioElement.addEventListener("loadedmetadata", function (_event) {
						    duration = audioElement.duration;
							//抹掉小数点
							document.getElementById('duration').value = parseInt(duration);
						    console.log(duration);
						});
					}catch(e){
						//TODO handle the exception
					}
					
			    }
		</script>
	</body>
</html>
